Vue 3 Development with the PrimeVue Framework — Toggle and Reorder Table Columns

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Toggle Table Columns

We can add a multi-select dropdown to let us toggle table columns on and off.

For instance, we can write:

<template>
  <div>
    <DataTable :value="cars">
      <template #header>
        <div style="text-align: left">
          <MultiSelect
            :modelValue="selectedColumns"
            :options="columns"
            optionLabel="header"
            @update:modelValue="onToggle"
            placeholder="Select Columns"
            style="width: 20em"
          />
        </div>
      </template>
      <Column
        v-for="(col, index) of selectedColumns"
        :field="col.field"
        :header="col.header"
        :key="`${col.field}_${index}`"
      ></Column>
    </DataTable>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
      selectedColumns: [],
      columns: [
        { field: "vin", header: "VIN" },
        { field: "year", header: "Year" },
        { field: "color", header: "Color" },
        { field: "brand", header: "Brand" },
      ],
    };
  },
  methods: {
    onToggle(value) {
      this.selectedColumns = this.columns.filter((col) => value.includes(col));
    },
  },
  created() {
    this.selectedColumns = this.columns;
  },
};
</script>

We listen to the update:modelValue event to run code to filter out the columns that we disabled.

We get the selected columns from the value parameter.

Resizable Columns

We can make columns resizable with the resizableColumns prop:

<template>
  <div>
    <DataTable
      :value="cars"
      :resizableColumns="true"
      columnResizeMode="fit"
      class="p-datatable-gridlines"
    >
      <Column field="vin" header="Vin"> </Column>
      <Column field="year" header="Year"> </Column>
      <Column field="brand" header="Brand"></Column>
      <Column field="color" header="Color"></Column>
    </DataTable>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
    };
  },
  methods: {},
};
</script>

We set the prop to true to enable column resizing.

columnResizeMode is set to 'fit' to make the columns fit the content.

Reordering Table Rows

Table rows can be reordered by listening to the row-reorder event:

<template>
  <div>
    <DataTable
      :value="cars"
      :reorderableColumns="true"
      @column-reorder="onColReorder"
      @row-reorder="onRowReorder"
    >
      <Column
        :rowReorder="true"
        headerStyle="width: 3rem"
        :reorderableColumn="false"
      />
      <Column
        v-for="col of columns"
        :field="col.field"
        :header="col.header"
        :key="col.field"
      ></Column>
    </DataTable>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
      columns: [
        { field: "vin", header: "VIN" },
        { field: "year", header: "Year" },
        { field: "color", header: "Color" },
        { field: "brand", header: "Brand" },
      ],
    };
  },
  methods: {
    onColReorder() {},
    onRowReorder(event) {
      this.cars = event.value;
    },
  },
};
</script>

We get the reordered items with the event.value property.

Likewise, we can listen to the column-reorder event to listen for column reordering actions.

Conclusion

We can toggle and reorder table rows and columns withn PrimeVue’s table.